/*
 * @Description: json.stringify()进阶
 * @Author: ZhangHan
 * @Date: 2025-09-02 15:47:12
 * @LastEditTime: 2025-09-02 16:25:42
 * @LastEditors: ZhangHan
 */
import React, { useState } from "react";
import { Card, Space, Input, Button, Divider } from "antd";

function AdvanceJson() {
  //数据1
  const [obj, setObj] = useState<any>({
    name: "谜语人",
    age: 25,
    password: "123456789",
    city: "广岛",
  });

  //数据2
  const [obj2, setObj2] = useState<any>({
    name: "黑衣人",
    age: 28,
    password: "admin1111",
    lastLogin: new Date(),
    todos: [
      { id: 1, text: "啊啊啊啊啊啊", done: true },
      { id: 2, text: "踩踩踩踩踩踩踩踩踩踩踩踩", done: false },
    ],
  });

  //数据3
  const [obj3, setObj3] = useState<any>({
    name: "Alice",
    age: 25,
    sensitiveInfo: "This should not be logged",
    toJSON: function () {
      // 自定义返回一个用于序列化的新对象
      return {
        name: this.name,
        age: this.age,
        generatedAt: new Date().toISOString(),
        sensitiveInfo: this.sensitiveInfo.substring(0, 10),
      };
    },
  });

  const handleReplacer = () => {
    // 只序列化 'name' 和 'age' 属性
    console.log(JSON.stringify(obj, ["name", "age"]));
    setObj(JSON.stringify(obj, ["name", "age"]));
  };

  function replacer(key, value) {
    // 过滤掉密码字段
    if (key === "password") return undefined;

    // 将 Date 对象转换为 ISO 字符串
    if (value instanceof Date) return value.toISOString();

    // 将 done的键的值转换为字符串形式的 "Completed" 或 "Pending"
    if (key === "done") {
      return value ? "Completed" : "Pending";
    }

    // 默认返回原值
    return value;
  }

  const handleReplacer2 = () => {
    //第三个参数可以传递 可以不传递，代表数字代表缩进距离 传递‘----’ 代表缩进符号
    //     可以是数字（表示缩进的空格数，最多为10）。

    // 可以是字符串（用该字符串作为缩进，最多取前10个字符）。
    // JSON.stringify(obj2, replacer,3)
    setObj2(JSON.stringify(obj2, replacer));
  };

  const handletoJSON = () => {
    // 自定义返回一个用于序列化的新对象
    setObj3(JSON.stringify(obj3));

  };

  return (
    <>
      <div className="w-full h-full text-center">
        <div className="text-center font-bold text-1.5xl mb-1">
          json.stringify()进阶
        </div>
        <Divider />
        <div className="mb-1">JSON.stringify(value,[key1,key2,...])</div>
        <div className="mb-1">原数据:&nbsp;{JSON.stringify(obj)}</div>
        <div>
          <Button type="primary" onClick={handleReplacer}>
            replacer-处理指定数据-只处理name和age属性
          </Button>
        </div>
        <Divider />
        <div className="mb-1">JSON.stringify(value,fnc)</div>
        <div className="mb-1">原数据:&nbsp;{JSON.stringify(obj2)}</div>
        <div>
          <Button type="primary" onClick={handleReplacer2}>
            replacer-处理指定数据-函数示处理，自定义返回值
          </Button>
        </div>
        <Divider />
        <div className="mb-1">toJSON() 方法</div>
        <div className="mb-1">
          如果一个被序列化的对象自身拥有 toJSON 方法，那么 JSON.stringify()
          会调用该方法的返回值进行序列化，而不是序列化对象本身。这给了对象一个自定义其序列化行为的机会。
        </div>

        <div>
          <Button type="primary" onClick={handletoJSON}>
            replacer-处理指定数据-函数示处理，自定义返回值
          </Button>
        </div>
      </div>
    </>
  );
}

export default AdvanceJson;
